<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="d1">
    <p>{{msg}}</p>
    <p>{{msg.split(' ').reverse().join(' ').toUpperCase()}}</p>
    <p>{{reverseMsg}}</p>
    <button @click="msg = 'Hello Vue'">修改msg值</button>
    <p>{{num}}</p>
    <p>{{doubleNum}}</p>
    <button @click="doubleNum = 10">修改doubleNum值</button>
</div>
<script>
    new Vue({
        el: "#d1",
        data: {
            msg: "welcome to vue",
            num: 2
        },
        computed: {
            reverseMsg: function () {
                return this.msg.split(' ').reverse().join(' ').toUpperCase();
            },
            doubleNum: {
                get: function () {
                    return this.num * 2;
                },
                // 只能对原始数据进行赋值
                set: function (value) {
                    // 在计算属性中,设置计算属性的值的时候
                    // 不能直接对计算属性进行赋值操作
                    // 计算属性本质上是依赖于数据仓库中的数据的
                    // 因此,此处只能对原始的数据进行操作
                    // 而不能直接对计算属性进行操作
                    // this.doubleNum = value;
                    this.num = value / 2;
                }
            }
        }
    });
</script>
</body>
</html>